<template>
    <device_manage :search="formSearch" :dataProcessing="dataProcessing" @changePageNum="changePageNum">
        <template #list-search>
            <el-form :model="formSearch" label-width="80px" size="small" class="formSearch">
                <el-form-item label="设备名称">
                    <el-input v-model="formSearch.deviceName" clearable placeholder="请输入设备名称"></el-input>
                </el-form-item>
            </el-form>
        </template>
        <template #table-column>
            <el-table-column type="selection" width="50" />
            <el-table-column prop="channelId" label="设备号" min-width="120px" />
            <el-table-column prop="name" label="设备名称" min-width="120px" />
            <el-table-column prop="deviceIp" label="设备IP" />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="primary" @click="playMonitor(scope.row)">播放</el-button>
                </template>
            </el-table-column>
        </template>
        <inBody>
            <!-- playerDialog-->
            <el-dialog title="监控播放" :visible.sync="playerDialog" width="30%" :close="closePlayer">
                <!-- <div id="dplayer" ref="player" class="dplayer" style="width:100%;height:auto;">
                </div> -->
                <!-- <DHPlayer downloadUrl="/static/DHPlayerDownload.zip"></DHPlayer> -->
                <!-- <div class="window1" v-if="videoType === 'video1'"> -->
                    <DHPlayer ref="DHPlayerdemo" ></DHPlayer>
                <!-- </div> -->
                <div style="height:500px;"></div>
                <span slot="footer" class="dialog-footer">
                    <!-- <el-button @click="closePlayer">关 闭</el-button> -->
                    <!-- <el-button type="primary" @click="playerDialog = false">确 定</el-button> -->
                </span>
            </el-dialog>
        </inBody>
    </device_manage>
</template>

<script>
import device_manage from './device_manage.vue';
import Hls from 'hls.js';
import DPlayer from 'dplayer';
import DHPlayer from "../player/demo.vue"
export default {
    components: { device_manage,DHPlayer },
    data() {
        return {
            dp: {}, //dPlayer播放器
            formSearch: {
                deviceName: '',
            },
            playerDialog: false,
            search: {
                deviceType: null,
                text: '',
                runningStatus: null,
                alarmStatus: null,
                startupStatus: null,
            },
            playerParams: {
                url: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
                // url: '',
                name: '',
                id: '',
            },
            playerControl: {},
            /* ----------------------------------- */
            activeKey: '1',
                showModal: false,
                path: '',
                path2: '',
                path3: '',
                startDownload: false,
                videoType: 'video1',
                currentNum: 0,
                errorTip: '',
                pathList: [
                    // 'rtsp://10.35.239.103:9090/dss/monitor/params?cameraid=1000021%240&substream=1&trackID=701 ',
                    // {
                    //     path: 'rtsp://10.35.238.43:9100/dss/monitor/param/cameraid=1009412$1$0$1%240%26substream=1?token=105',
                    //     redirect: false
                    // },
                ], //实时预览测试
                realTimeList: [{
                    channelId: '1000032$1$0$0'
                }],
                videoPlayList: [{
                    "channelId": "1000014$1$0$0",
                    "streamType": "1",
                    "type": "hls",
                    "recordType": "1",
                    "startTime": '1637715062',
                    "endTime": '1637769062',
                    "recordSource": "2"
                }],
                enableDrag: true,
                divisionNum: 4, // 当前窗口的分割数量
                isRedirect: false, // true 是代表重定向(拼接的)  false 表示取消重定向(接口返回)
                audioType: '0',
                audioBit: '8',
                sampleRate: '8000',
                talkType: '1',
                playingStatus:false,
        };
    },
    methods: {
        setplayingStatus(val){
            this.playingStatus = val
        },
        playMonitor(params) {
            // this.playerDialog = true;
            /* this.$nextTick(() => {
                this.dp = new DPlayer({
                    element: this.$refs.player,
                    video: {
                        url: params.url,
                        type: 'customHls',
                        customType: {
                            customHls: function (video, player) {
                                const hls = new Hls();
                                hls.loadSource(video.src);
                                hls.attachMedia(video);
                            },
                        },
                    },
                    autoplay: true,
                });
            }); */
            this.path = params.url;
            this.playerDialog = true;
            this.playingStatus = true;
            this.$refs.DHPlayerdemo.changeUrl(this.path);
            // this.$refs[DHPlayer].setRealTime({path: this.path, snum: this.currentNum, redirect: this.isRedirect})
        },
        playDH(){
            this.$refs[DHPlayer].setRealTime({path: this.path, snum: 0, redirect: false})
            // this.$refs[DHPlayer].setRealTime({path: this.path, snum: this.currentNum, redirect: this.isRedirect})
        },
        closePlayer() {
            // this.playerDialog = false;
            // this.playerParams.url = '';
            // this.dp.destroy();
        },
        changePageNum(val) {
            this.formSearch.current = val;
            this.dataProcessing();
        },
        dataProcessing() {
            const tableData = [];
            for (let i = 0; i < 10; i++) {
                tableData.push({
                    id: (Math.PI * Math.random() * 10000).toFixed(0),
                    deviceName: `${i + 1}号设备`,
                    sectionName: `一栋${i + 1}层`,
                });
            }
            return tableData;
        },
    },
    mounted() {},
    beforeDestroy() {
        this.closePlayer();
    },
};
</script>

<style scoped>
.formSearch /deep/ .el-input {
    width: 200px;
}

</style>